<template>
  <div ref="tuiImageEditor" id="tui-image-editor"></div>
</template>

<script lang="ts" setup>
  import ImageEditor from 'tui-image-editor';
  import 'tui-image-editor/dist/tui-image-editor.min.css';
  import '@/styles/tui-color-picker.min.css';
  import { ref, onMounted } from 'vue';
  const tuiImageEditor = ref();
  const editorInstance = ref();
  import { basicProps, locale_zh, customTheme } from './props';
  const props = defineProps({ ...basicProps });

  const includeUIOptions = {
    includeUI: {
      loadImage: {
        path: props.imageEditorSrc,
        name: 'image',
      },
      menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
      initMenu: 'draw', // 默认打开的菜单项
      menuBarPosition: 'bottom', // 菜单所在的位置
      locale: locale_zh, // 本地化语言为中文
      theme: customTheme, // 自定义样式
    },
    cssMaxWidth: 700,
    cssMaxHeight: 500,
  };
  onMounted(() => {
    editorInstance.value = new ImageEditor(tuiImageEditor.value, includeUIOptions);
  });
  defineExpose({
    editorInstance,
  });
</script>

<style lang="less"></style>
